<template>
    <a-spin :loading="loading" style="width: 100%">
        <a-card
            class="general-card"
            :header-style="{ paddingBottom: '0' }"
            :body-style="{
                padding: '20px',
            }"
        >
            <template #title>
                {{ $t('workplace.categoriesPercent') }}
            </template>
            <Chart height="310px" :option="chartOption" />
        </a-card>
    </a-spin>
</template>

<script lang="ts" setup>
    import useLoading from '@/hooks/loading';
    import useChartOption from '@/hooks/chart-option';

    const { loading } = useLoading();
    const { chartOption } = useChartOption((isDark) => {
        // echarts support https://echarts.apache.org/zh/theme-builder.html
        // It's not used here
        return {
            legend: {
                left: 'center',
                data: ['纯文本', '图文类', '视频类'],
                bottom: 0,
                icon: 'circle',
                itemWidth: 8,
                textStyle: {
                    color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
                },
                itemStyle: {
                    borderWidth: 0,
                },
            },
            tooltip: {
                show: true,
                trigger: 'item',
            },
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: '40%',
                        style: {
                            text: '内容量',
                            textAlign: 'center',
                            fill: isDark ? '#ffffffb3' : '#4E5969',
                            fontSize: 14,
                        },
                    },
                    {
                        type: 'text',
                        left: 'center',
                        top: '50%',
                        style: {
                            text: '928,531',
                            textAlign: 'center',
                            fill: isDark ? '#ffffffb3' : '#1D2129',
                            fontSize: 16,
                            fontWeight: 500,
                        },
                    },
                ],
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '50%'],
                    label: {
                        formatter: '{d}%',
                        fontSize: 14,
                        color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
                    },
                    itemStyle: {
                        borderColor: isDark ? '#232324' : '#fff',
                        borderWidth: 1,
                    },
                    data: [
                        {
                            value: [148564],
                            name: '纯文本',
                            itemStyle: {
                                color: isDark ? '#3D72F6' : '#249EFF',
                            },
                        },
                        {
                            value: [334271],
                            name: '图文类',
                            itemStyle: {
                                color: isDark ? '#A079DC' : '#313CA9',
                            },
                        },
                        {
                            value: [445694],
                            name: '视频类',
                            itemStyle: {
                                color: isDark ? '#6CAAF5' : '#21CCFF',
                            },
                        },
                    ],
                },
            ],
        };
    });
</script>

<style scoped lang="less"></style>
